<!DOCTYPE html>
<html>
<head>
	<title>SelectPage使用实例</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">

	<link rel="stylesheet" href="../lib/selectmenu/selectmenu.css" type="text/css">
	<link rel="stylesheet" href="../lib/bdialog/b.dialog.bootstrap3.css" type="text/css">
	
	<link rel="stylesheet" href="../lib/selectpage/selectpage.css" type="text/css">
    
	<link rel="stylesheet" href="../css/header.css" />
	<link rel="stylesheet" href="../css/demo.css" />

</head>

<body>

	<div class="content">
	<div class="container" >
		<h1 class="page-header">下拉分页控件 <small>支持下拉，分页，键盘操作等功能</small></h1>
		<div class="row-fluid">
			<h2 class="page-header">1.基本初始化 <small>获得选中文本，清除选中，修改选中，禁用/启用</small></h2>
			<div id="testRow" style="">
                <input type="text" id="selectPage" class="" placeholder="请输入查询关键字" >
                <button type="button" class="btn btn-default" id="func1"><i class="fa fa-file-text-o"></i> 获得选中项目的文本内容</button>
                <button type="button" class="btn btn-default" id="func2"><i class="fa fa-ban"></i> 清除所有选中的项目</button>
                <button type="button" class="btn btn-default" id="func3"><i class="fa fa-check-square-o "></i> 动态修改选中项目</button>
                <button type="button" class="btn btn-default" id="funcDisabled"><i class="fa fa-hand-paper-o "></i> 禁用/启用插件</button>
            </div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//表单声明元素
<input type="text" id="selectPage" >
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
	{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
	{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
	{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
	{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//showField：设置下拉列表中显示文本的列
//keyField：设置下拉列表项目中项目的KEY值，用于提交表单
//data：数据源，可以是JSON数据格式，也可以是URL
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data
});
//获得选中项目的文本内容
$('#func1').click(function(){
	alert($('#selectPage').selectPageText());
});
//清除所有选中的项目
$('#func2').click(function(){
	$('#selectPage').selectPageClear();
});
//动态修改选中项目
$('#func3').click(function(){
	$('#selectPage').val('20');
	$('#selectPage').selectPageRefresh();
});
//设置插件禁用 / 启用
$('#funcDisabled').click(function(){
    if($('#selectPage').selectPageDisabled())//判断当前状态
        $('#selectPage').selectPageDisabled(false);
    else
        $('#selectPage').selectPageDisabled(true);
});
]]>
</script>
		</div>

        <div class="row-fluid">
            <h2 class="page-header">2.仅选择模式 <small>只读（不允许输入），关闭分页，列表高度</small></h2>
            <input type="text" id="selectPageSelectOnly" class="form-control" placeholder="请输入查询关键字" >
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//将插件设置成纯下拉列表模式
$('#selectPageSelectOnly').selectPage({
    showField : 'name',
    keyField : 'id',
    data : tag_data,
    //仅选择模式，不允许输入查询关键字
    selectOnly : true,
    //关闭分页栏，数据将会一次性在列表中展示，上限200个项目
    pagination : false,
    //关闭分页的状态下，列表显示的项目个数，其它的项目以滚动条滚动方式展现（默认10个）
    listSize : 15,
    multiple : true
});
]]>
</script>
        </div>

		<div class="row-fluid">
			<h2 class="page-header">3.设置初始化选中项目 <small>初始选中，多查询条件，多排序</small></h2>
			<div class="row">
				<div class="pull-right col-md-6">
					<input type="text" id="selectPage1" class="form-control" data-init="4" >
				</div>
			</div>
            <div class="row">
                <div class="col-md-12">
                    <dl>
                        <dt>多关键字联合查询演示</dt>
                        <dd>在输入框中输入“湖 火”，两个字之间有一个半角空格，请观察在输入“湖”和“湖 火”两种情况下结果列表的展示内容。
                            当前设置了andOr : 'OR'即是希望结果集找到包含“湖”或“火”两个关键字的内容</dd>
                    </dl>
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//设置初始化值有设置 data-init 属性或直接设置 value 属性值
//value / data-init：设置列表初始被选中的项目，传递值为keyField对应的内容
<div class="row">
	<div class="pull-right col-md-6">
		<input type="text" id="selectPage1" data-init="4" class="form-control" >
	</div>
</div>
$('#selectPage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : tag_data,
    //多查询条件之间的“与”“或”关系
    andOr : 'OR',
    //设置结果集排序，若只指定字段，不指定排序方式，则默认使用asc升序模式
    //排序字段若不指定，则默认对showField指定的列进行升序排列
    //若需要多字段排序，则设置['id desc','name']
    //当前案例设置了使用id字段的内容进行降序排序
    orderBy : ['id desc']
});
]]>
</script>
		</div>
			
		<div class="row-fluid">
			<h2 class="page-header">4.项目显示文本自定义 <small>显示内容格式化，关闭下拉按钮</small></h2>
			<div class="row">
				<div class="col-md-6">
					<input type="text" id="selectPage2" class="form-control" value="4" placeholder="请输入查询关键字" >
				</div>
			</div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
<div class="row">
	<div class="pull-right col-md-6">
		<input type="text" id="selectPage" class="form-control" >
	</div>
</div>
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//设置每页显示记录数
	pageSize : 5,
	//关闭向下的三角尖按钮
	dropButton : false,
	//格式化显示项目，提供源数据进行使用
	formatItem : function(data){
		return data.desc + '(' + data.name + ')';
	}
});
]]>
</script>
		</div>
		<div class="row-fluid">
			<h2 class="page-header">5.多项选择模式 <small>多选模式（标签形式），多选初始化设置</small></h2>
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="selectPage3" class="form-control" value="7,2,3" placeholder="请输入查询关键字" >
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
<input type="text" id="selectPage" class="form-control" value="7,2,3" placeholder="请输入查询关键字" >
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//启用多选模式
	multiple : true
});
]]>
</script>
		</div>
		
		<div class="row-fluid">
			<h2 class="page-header">6.多项选择模式限制最大选中项目 <small>点击不关闭列表，限制最多选中个数</small></h2>
			<input type="text" id="selectPage4" class="form-control" placeholder="请输入查询关键字" >
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//启用多选模式
	multiple : true,
	//限制最多选中三个项目
	maxSelectLimit : 3,
	//设置选中项目后不关闭列表
	selectToCloseList : false
});
]]>
</script>
		</div>

		<div class="row-fluid">
			<h2 class="page-header">7.事件回调处理 <small>项目选中回调</small></h2>
			<input type="text" id="selectPage5" class="form-control" placeholder="请输入查询关键字" >
			<div id="callbackLog" class="logBox"></div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	multiple : true,
	//选中项目后的回调处理
	//data：选中行的原始数据对象
	eSelect : function(data){
		$('#callbackLog').append(data.desc + '(' + data.name + ')<br/>');
    },
    //项目移除后的回调
    //datas: 被移除的项目(Array)
    eTagRemove: function(datas){
        if(datas && datas.length){
            for(var i=0;i<datas.length;i++){
                $('#callbackLog').append(datas[i].desc  + '(' + datas[i].name + ') item removed<br/>');
            }
        }
    }
});
]]>
</script>
		</div>
		
		
		<div class="row-fluid">
			<h2 class="page-header">8.Ajax请求服务端数据模式 <small>服务端数据模式（ajax），服务端请求参数，请求完成的数据处理回调，服务端模式的初始化</small></h2>
			<input type="text" id="selectPage6" class="form-control" data-init="1" placeholder="请输入查询关键字" >
			<p style="color:red;">静态页面无法展示ajax服务端数据读取，敬请参考代码使用</p>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage5').selectPage({
	showField : 'name',
	keyField : 'id',
	data : 'http://aaa.com/load',
	params : function(){return {'name':'aa','sex':1};},
	//ajax请求后服务端返回的数据格式处理
	//返回的数据里必须包含list（Array）和totalRow（number|string）两个节点
	eAjaxSuccess : function(d){
		var result;
		if(d) result = d.values.gridResult;
		else result = undefined;
		return result;
	}
});
]]>
</script>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//服务端返回的JSON数据格式
//这里的示例数据，有些节点不是必须的，最重要的是list和totalRow两个节点必须存在
//所以在上面的代码中，设置了eAjaxSuccess的回调中将values.gridResult节点
//返回，因为在该节点下存在list和totalRow两个数据项
{
    "values": {
        "gridResult": {
            "pageSize": 10,
            "pageNumber": 1,
            "totalRow": 11,
            "totalPage": 2,
            "list": [
                {"name": "计算机网络","id": "1"},
                {"name": "计算机网络1","id": "2"},
				{...}
            ]
        }
    }
}
]]>
</script>
            <h3>服务端需要接收处理的参数</h3>
            <dl class="dl-horizontal ajaxDesc">
                <dt>pageNumber</dt>
                <dd>当前页号</dd>
                <dt>pageSize</dt>
                <dd>每页显示记录数</dd>
                <dt>searchTable</dt>
                <dd>查询的数据表，此字段可根据具体需求指定，默认设置'tbl'</dd>
                <dt>andOr</dt>
                <dd>插件初始化的参数，该参数会被传递到服务端，通常只有“AND”或者“OR”两种值，按需进行设置、获取</dd>
                <dt>orderBy</dt>
                <dd>排序字段，默认获得searchField指定的字段进行排序，默认排序顺序为“ASC”</dd>
                <dt>xxx</dt>
                <dd>
                    autocomplete模糊查询字段，通常该字段获取showField属性指定的字段，若在服务端用于接收的变量名与返回的字段不同，可用该字段进行接收<br>例如：
                    服务端返回的显示字段是name，则用于接收模糊查询的字段是userName，则需要在插件中设置searchField='userName'，即可完成配对
                </dd>
                <dt>searchKey</dt>
                <dd>ajax模式中用于获得初始化选中项目的查询字段，默认自动获得keyField指定的字段</dd>
                <dt>searchValue</dt>
                <dd>ajax模式中用于获得初始化选中项目的id值字段，本字段与searchKey字段组合后，可以在服务端的SQL查询中拼接出“where searchKey = searchValue”或“where searchKey in (searchValue)”</dd>
            </dl>

            <div class="row">
                <div class="col-md-12">
                <div class="col-md-5 panel panel-default" style="margin-right: 20px;">
                    <div class="panel-body">
                        <h4>ajax初始化选中值需要使用的字段 <small>服务端接收的参数</small></h4>
                        <ul>
                            <li><strong>searchKey</strong> <small>服务端查询的ID字段，进行完整匹配</small></li>
                            <li><strong>searchValue</strong> <small>具体查询的ID值，如果多个则会以“,”隔开，服务端接收后需要手动进行分割</small></li>
                            <li><strong>searchTable</strong> <small>查询表指定，通常不需要使用，作为备用字段</small></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 panel panel-default">
                    <div class="panel-body">
                        <h4>ajax读取分页数据需要使用的字段 <small>服务端接收的参数</small></h4>
                        <ul>
                            <li><strong>pageNumber</strong> <small>当前分页号</small></li>
                            <li><strong>pageSize</strong> <small>每页记录数</small></li>
                            <li><strong>searchTable</strong> <small>要查询的数据表</small></li>
                            <li><strong>xxx</strong> <small>showField或searchField指定的字段名，用于实际模糊查询的字段</small></li>
                            <li><strong>andOr</strong> <small>查询的与或条件，按需传递</small></li>
                            <li><strong>orderBy</strong> <small>排序字段，通常取自searchField</small></li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:java">
<![CDATA[
//服务端处理样例（J2EE-JFinal 的 Controller 代码）
public void loadUserList(){
    StringBuilder sb = new StringBuilder();
    List<Object> params = new ArrayList<Object>();
    if(StringUtils.isNotEmpty(getPara("userName"))){//用户姓名
        sb.append(" and name like ?");
        params.add("%" + getPara("userName") + "%");
    }
    if(StringUtils.isNotEmpty(getPara("userSex"))){//用户性别
        sb.append(" and sex = ?");
        params.add(getPara("userSex"));
    }
    if(StringUtils.isNotEmpty(getPara("userStatus"))){//用户状态
        sb.append(" and status = ?");
        params.add(getPara("userStatus"));
    }
    //用于查询初始化项目
    if(StringUtils.isNotEmpty(getPara("searchKey")) && StringUtils.isNotEmpty(getPara("searchValue"))){
        String value = getPara("searchValue");
        String[] valuearr = value.split(",");
        String searchStr = "";
        for(String val : valuearr){
            if(searchStr.length() != 0) searchStr += ",";
            searchStr += "?";
            params.add(val);
        }
        sb.append(" and " + getPara("searchKey") + " in (" + searchStr + ")" );
    }
    this.getPageInfo();
    Page<Record> plist = Db.paginate(this.getPage(),
                                     this.getPageSize(),
                                     "select *","from user where 1=1 " + sb.toString(),
                                     params.toArray());

    this.setAttr("userList", plist);
    renderJsp("/userMain.jsp");
}
]]>
</script>
            <p><span class="label label-primary">提示</span> 根据这一份服务端处理代码，就需要在插件初始化时指定searchField : "userName"，若不指定，则会默认传递"name"字段，导致服务端接收不到模糊查询的内容</p>
		</div>
		
		<div class="row-fluid">
			<h2 class="page-header">9.动态修改数据源 <small>动态修改数据源（服务端模式不支持）</small></h2>
			<div class="row">
				<div class="col-md-5">
					<input type="text" id="selectPage7" class="form-control" placeholder="请输入查询关键字" >
				</div>
				<button type="button" class="btn btn-default" id="btnModifyDataSource"><i class="fa fa-database"></i> 修改数据源</button>
			</div>

<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
var data = [
	{id:1 ,name:'北京'},{id:2 ,name:'上海'},
	{id:3 ,name:'广州'},{id:4 ,name:'深圳'},
	{id:5 ,name:'成都'},{id:6 ,name:'重庆'},
	{id:7 ,name:'福州'},{id:8 ,name:'长沙'},
	{id:9 ,name:'西安'},{id:10,name:'浙江'}
];
$('#selectPage').selectPageData(data);
]]>
</script>
		</div>
		
		
		
        <div class="row-fluid">
            <h2 class="page-header">10.数据联动 <small>多功能同时使用案例</small></h2>
            <div class="row">
                <div class="col-md-3">
                    <input type="text" id="selectPageProvince" class="form-control" placeholder="请选择省份" >
                </div>
                <div class="col-md-3">
                    <input type="text" id="selectPageCity" class="form-control" placeholder="请选择城市" >
                </div>
            </div>


            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//定义省和城市的数据，仅作演示
var province = [
    {id:'001',name:'广东'},
    {id:'002',name:'福建'},
    {id:'003',name:'河北'},
    {id:'004',name:'江苏'},
    {id:'005',name:'浙江'}
];
var city = [
    {id:'001',pId:'001',name:'广州'},
    {id:'002',pId:'001',name:'深圳'},
    {id:'003',pId:'002',name:'福州'},
    {id:'004',pId:'002',name:'厦门'},
    {id:'005',pId:'003',name:'石家庄'},
    {id:'006',pId:'003',name:'保定'},
    {id:'007',pId:'004',name:'南京'},
    {id:'008',pId:'004',name:'无锡'},
    {id:'009',pId:'005',name:'杭州'},
    {id:'010',pId:'005',name:'温州'}
];
//省份选择器初始化
$('#selectPageProvince').selectPage({
    showField: 'name',
    keyField: 'id',
    data: province,
    eSelect: function (data) {
        if(data){
            var arr = new Array();
            $.each(city, function(i,row){
                if(row.pId === data.id) arr.push(row);
            });
            //从城市数据中过滤省份是选择的省，并刷新城市的选择器数据
            if(arr.length) $('#selectPageCity').selectPageData(arr);
        }
    },
    eClear: function(){//清空时，同时清空城市内容
        $('#selectPageCity').selectPageClear();
        $('#selectPageCity').selectPageData([]);
    }
});
//城市选择器的初始化，使用空数据进行初始化
$('#selectPageCity').selectPage({
    showField: 'name',
    keyField: 'id',
    data: []
});
]]>
            </script>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3>服务端数据模式的联动</h3>
                    <ul>
                        <li>服务端模式的 SelectPage 进行联动与静态模式的区在于数据过滤处理在服务端处理</li>
                        <li>初始化城市选择器时，需要处理请求数据，返回空列表</li>
                        <li>需要在选择省份后，在回调里清空城市选择器中已选中的项目</li>
                    </ul>
                </div>
            </div>

            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
var lastProvince = '';
//省份选择器初始化
$('#selectPageProvince').selectPage({
    showField: 'name',
    keyField: 'id',
    data: 'http://aaa.com/loadProvince',
    //选择省份时，清空城市列表已选中的项目
    eSelect: function (data) {
        if(data && lastProvince !== data.id){
            $('#selectPageCity').selectPageClear();
        }
    }
});
//城市选择器的初始化，使用空数据进行初始化
$('#selectPageCity').selectPage({
    showField: 'name',
    keyField: 'id',
    data: 'http://aaa.com/loadCity',
    //向服务端提交的参数中，增加已选中的
    //设置返回-1，意为通知服务端返回空列表，初始化时使用
    params: function(){
        var pv = $('#selectPageProvince').val();
        return {'province': pv?pv:'-1'};
    }
});
]]>
            </script>



            <h3 class="page-header">与其它插件的联动 <small>SelectMenu、bDialog等</small></h3>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3><a href="https://github.com/TerryZ/SelectMenu" target="_blank">SelectMenu</a></h3>
                    <p>简洁、易用、多样的菜单解决方案</p>
                    <h3><a href="https://github.com/TerryZ/bDialog" target="_blank">bDialog</a></h3>
                    <p>可多层嵌套、高定制化的模态窗口，包含有多种使用形式
                        <ul>
                            <li>Modal <small class="text-muted">模态弹出窗口，可以拥有独立上下文的窗口</small></li>
                            <li>Alert <small class="text-muted">消息提示对话框</small></li>
                            <li>Mask <small class="text-muted">显示一个全屏遮罩</small></li>
                            <li>Toast <small class="text-muted">边角信息提示对话框，可以在屏幕的8个边角显示对话框</small></li>
                        </ul>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <input type="text" id="selectPageProvince1" class="form-control" placeholder="请选择省份" >
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-default" id="selectMenuCity">选择城市 <i class="fa fa-caret-down"></i></button>
                </div>
            </div>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html
<div class="row">
    <div class="col-md-3">
        <input type="text" id="selectPageProvince1" class="form-control" placeholder="请选择省份" >
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default" id="selectMenuCity">选择城市 <i class="fa fa-caret-down"></i></button>
    </div>
</div>
//javascript
//SelectPage初始化
$('#selectPageProvince1').selectPage({
    showField: 'name',
    keyField: 'id',
    data: province,
    eClear: function(){
        $('#selectMenuCity').selectMenuClear();
    }
});
//SelectMenu的初始化，以及使用动态数据源
$('#selectMenuCity').click(function(){
    var pv = $('#selectPageProvince1');
    if(!pv.val()){
        bDialog.alert('请选择一个省份！');
    }else{
        $(this).selectMenu({
            showField : 'name',//指定显示文本的字段
            keyField : 'id',//指定id的字段
            data : function(){
                var arr = new Array();
                $.each(city, function(i,row){
                    if(row.pId === pv.val()) arr.push(row);
                });
                return arr;
            },
            eSelect: function(data){
                if(data.length)
                    bDialog.alert('您选择了 <b>'+pv.selectPageText()+'</b> 省 <b>'+data[0].name+'</b> 市！');
            }
        });
    }
});
]]>
            </script>
        </div>
		
		
		
		
		
<!--

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

-->
		
		
	</div>
	</div>







    


	<script type="text/javascript" src="../lib/jquery.min.js" ></script>

	<script type="text/javascript" src="../lib/selectmenu/selectmenu.min.js" ></script>
	<script type="text/javascript" src="../js/common.js" ></script>

	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJava.js" ></script>
	<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
	<script type="text/javascript">
    $(function(){
        setActive('mnuDemo');
        SyntaxHighlighter.all();
    });
    </script>

	<script type="text/javascript" src="../lib/selectpage/selectpage.min.js" ></script>
	<script type="text/javascript" src="../lib/bdialog/b.dialog.js" ></script>

	<script type="text/javascript" src="../js/selectpage/demo.js" ></script>
</body>
</html>